<template>
  <div>
  </div>
</template>

<script>

import {Coordinate, ui, Util} from 'maptalks';

export default {
  name: 'ctMapInfoWindow',
  components: {ui, Util},
  props: {
    point: {
      type: Array,
      default() {
        return []
      },
    },
    options: {
      type: Object,
      default() {
        return null;
      },
    },
    domElement: {
      type: Element,
      default() {
        return []
      },
    },
    zIndex: {}
  },
  data: () => ({
    defaultOpt: {
      autoPan: true,
      autoCloseOn: 'dblclick',
      autoOpenOn: null,  //set to null if not to open window when clicking on map ;   'click'
      single: true,
      width: 183,
      height: 105,
      custom: true,
      dx: 25,
      dy: -73,
      content: this.domElement
    },
    infoWindowParentDom: null,
    currentInfoWindow: null,
  }),
  methods: {
    reRender() {
      this.$nextTick(function () {
        const {firstLayer} = this.$parent
        if (this.options) {
          Util.extend(this.defaultOpt, this.options)
        }
        // 新建 infoWindow 对象
        let iw = new ui.InfoWindow(this.defaultOpt).addTo(firstLayer);
        this.currentInfoWindow = iw
        this.$emit('infoWindowCompleted', iw)
        // 窗口监听
        iw.on('showend hide', (p) => {
          switch (p.type) {
            case 'showend':
              this.$emit('showend', p)
              break
            case 'hide':
              this.$emit('hide', p)
              break
            default:
              break
          }
        })
        iw.setContent(this.infoWindowParentDom)
        iw.show(new Coordinate(this.point))
      })
    },
  },
  mounted() {
    this.infoWindowParentDom = document.createElement("div")
    this.infoWindowParentDom.className = "ct-custom-info-window"
    this.$nextTick(function () {
      this.reRender()
    })
  },
  watch: {
    point: {
      immediate: false,
      handler: function (v) {
        if (this.currentInfoWindow) {
          if (this.domElement) {
            this.infoWindowParentDom.appendChild(this.domElement)
          }
          this.currentInfoWindow.setContent(this.infoWindowParentDom)
          this.currentInfoWindow.show(new Coordinate(this.point))
        }
      },
    },
    // options: {
    //   deep: false,
    //   immediate: false,
    //   handler: function (v) {
    //     Util.extend(this.defaultOpt, this.options)
    //     this.currentInfoWindow.config({dy: -80})
    //   },
    // },
  },
};
</script>
<style>
.ct-custom-info-window {
  min-width: 150px;
  min-height: 100px;
  border: 1px solid #c1c2c4;
  background-color: #ffffff;
}

.ct-custom-info-window:after {
  background-image: url(./jiantou.png);
  background-repeat: no-repeat;
  content: "";
  position: absolute;
  width: 50px;
  height: 30px;
  left: calc(50% - 25px);
  bottom: -30px;
}
</style>

